<script setup>
import {computed} from "vue";
import store, {cosSource} from "../../store/store.js";

const player2State = computed(() => store.getters.getPlayer2State)
const gameRules = computed(() => store.getters.getRules)
</script>

<template>
  <div class="player2-info">
    <div class="name-and-bans">
      <div class="player2-name">
        <div class="player2-name-box" :style="{backgroundImage: `url('${cosSource}UI/redNameBox.png')`}">
          <span style="color: white; font-size: large; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
            {{player2State.name}}
          </span>
        </div>
      </div>
      <div class="player2-bans">
        <div style="width: 40%">
          <div :style="{height: '100%', aspectRatio: '1/1', backgroundImage: `url('${cosSource}UI/redSuitAndTypeBox.png')`, backgroundRepeat: 'round',
            display: 'flex', justifyContent: 'center', alignItems: 'center'}">
            <img style="max-height: 100%; max-width: 100%" v-if="gameRules.rule_first !== 'rule4' && gameRules.rule_second !== 'rule4'" :src="`${cosSource}UI/rockMaskSign.png`"/>
            <img style="max-height: 100%; max-width: 100%" v-else-if="player2State.type_banned_url" :src="player2State.type_banned_url"/>
          </div>
        </div>
        <div style="width: 40%; margin-left: 8%;">
          <div :style="{height: '100%', aspectRatio: '1/1', backgroundImage: `url('${cosSource}UI/redSuitAndTypeBox.png')`, backgroundRepeat: 'round',
            display: 'flex', justifyContent: 'center', alignItems: 'center'}">
            <img style="max-height: 100%; max-width: 100%" v-if="gameRules.rule_first !== 'rule2' && gameRules.rule_second !== 'rule2'" :src="`${cosSource}UI/rockMaskSign.png`"/>
            <img style="max-height: 100%; max-width: 100%" v-else-if="player2State.suit_banned_url" :src="player2State.suit_banned_url"/>
          </div>
        </div>
      </div>
    </div>
    <div class="player2-suit">
      <div :style="{backgroundImage: `url('${cosSource}UI/redSuitAndTypeBox.png')`, backgroundRepeat: 'round',
        height: '100%', aspectRatio: '1/1', display: 'flex', justifyContent: 'center', alignItems: 'center'}">
        <img style="max-height: 100%; max-width: 100%" v-if="player2State.suit_picked_url" :src="player2State.suit_picked_url" :alt="player2State.suit_picked"/>
      </div>
    </div>


    <div class="roll-and-hide">
      <div v-if="player2State.chance.roll" style="height: 30%;">
        <img :src="`${cosSource}UI/rollSign.png`" style="height: 80%">
        <span style="color: white; font-size: larger">
          &nbsp;{{player2State.chance.roll}}
        </span>
      </div>
      <div v-if="player2State.chance.hide" style="height: 30%;">
        <img :src="`${cosSource}UI/hideSign.png`" style="height: 80%">
        <span style="color: white; font-size: larger">
          &nbsp;&nbsp;{{player2State.chance.hide}}
        </span>
      </div>

      <div v-if="player2State.chance.both" style="height: 30%;">
        <img :src="`${cosSource}UI/commonSign.png`" style="height: 80%">
        <span style="color: white; font-size: larger">
          &nbsp;&nbsp;{{player2State.chance.both}}
        </span>
      </div>
<!--      <div style="height: 30%; background-color: palevioletred">-->
<!--        重抽:{{player2State.chance.roll}}-->
<!--      </div>-->

<!--      <div style="height: 30%; background-color: palevioletred">-->
<!--        暗手:{{player2State.chance.hide}}-->
<!--      </div>-->

<!--      <div style="height: 30%; background-color: palevioletred">-->
<!--        共用:{{player2State.chance.both}}-->
<!--      </div>-->
    </div>
  </div>
</template>

<style scoped>
.player2-info {
  display: flex;
  width: 35%;
}
.roll-and-hide {
  display: flex;
  flex-direction: column-reverse;
  padding: 2%;
  width: 16%;
}
.player2-suit {
  display: flex;
  width: 36%;
  padding: 2%;
  justify-content: flex-end
}
.name-and-bans {
  width: 36%;
  padding: 2%;
}
.player2-name {
  height: 40%;
  display: flex;
  justify-content: center;
}
.player2-name-box {
  width: 100%;
  height: 70%;
  background-repeat: round;
}
.player2-bans {
  height: 60%;
  display: flex;
}
</style>